<extend name='Public/demo' />

<block name="contents">

<link rel="stylesheet" href="__PUBLIC__/Form/css/style.css">
    <div class="cd-popup" role="alert">
    <div class="cd-popup-container">
        <p>转发动态</p>
        <div class="hiddenarea" style="display:none"></div>
        <textarea class="form-control " id="textarea" rows="3" placeholder="转发内容不可以为空哦~"></textarea>
        <ul class="cd-buttons">
            <li style="width:100%;cursor: pointer;"><a class="btn-yes" data="">转发动态</a></li>
        </ul>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    <!-- cd-popup-container -->
</div>
    <div class="row">
        <aside class="profile-nav col-lg-3">
            <section class="panel">
                <div class="user-heading round">
                    <a href="{:U('Visitors/index')}?id={$info.user_id}">
                        <img src="__PUBLIC__{$info.photo}" style='width:100px;height:100px;border-radius: 50%'>
                    </a>
                    <h1>{$info.nickname}</h1>
                    <p>{$info.username}</p>
                </div>
                <ul class="nav nav-pills nav-stacked">
                    <li class="active">
                        <a href="{:U('Visitors/index')}?id={$info.user_id}"> <i class="icon-calendar"></i> 个人简介</a>
                    </li>
                    <li>
                        <a href="{:U('Visitors/news')}?id={$info.user_id}"> <i class="icon-user"></i> 他的动态</a>
                    </li>
                    <li>
                        <a href="{:U('Image/index')}?id={$info.user_id}" target="_blank"> <i class="icon-calendar"></i> 他的相册</a>
                    </li>
<!--                     <li>
                        <a href="{:U('Visitors/friend')}?id={$info.user_id}"> <i class="icon-edit"></i> 他的好友</a>
                    </li> -->
                </ul>
            </section>
        </aside>

        <aside class="profile-info col-lg-9">
                <section class="pannel">
                      <!-- 动态展示 S -->
                    <div class="panel-body newsare"></div>
                      <!-- 动态展示 E -->
                </section>
        </aside>
    </div>

    <script type="text/javascript">
                    var page = 1 ;
                    //访问页面时 初始化好友推荐
                    //得到被访问者的ID
                    var vid = <?php echo $_GET['id'] ?>;
                    pajax(page,vid);
                    // console.log(page);
                    //设置是否继续发送ajax
                    var ajaxturn = true;
                    //得到出发的阀值
                    var fz = - 7;  // 设置开始启动ajax的阀值 默认为倒数第六个
                    //设置ajax的状态
                    var ajaxstatus = true; //当开始发送ajax 的时候 其值变为false
                    //当鼠标经过索引为当前陌生人总数 - 6的元素时  出发ajax
                    $('.media:gt('+fz +')').live('hover',function(){
                      //当不能在发送ajax的时候
                      if (!ajaxturn) {return;}
                        cshbb(1000);
                        page ++;
                        pajax(page,vid);
                    });

                    //封装加载自己和好友动态的函数
                    function pajax(p,vid){
                            //发送ajax  得到自己和好友的数据
                            $.post("{:U('Visitors/ajaxpull')}",{'page':p,'vid':vid},function(dpull){
                              if (dpull != null) {
                              //遍历数据
                              //判断是否为转发
                              var turn_content_str = '';
                              for (var i = 0; i < dpull.length; i++) {
                                // if (dpull[i]['turn_content'] == '原动态已被删除~~~~抱歉抱歉~') {
                                  //准备正则
                                  var reg = /原动态已被删除~~~~抱歉抱歉~$/;
                                if ( reg.test(dpull[i]['turn_content']) ) {
                                    //初始化
                                    turn_content_str = '<div class="turn_content">' +dpull[i]['turn_content']+'</div>';
                                }else if(dpull[i]['turn_content'] != ''){
                                    turn_content_str = '<div class="turn_content"><a href="{:U('Visitors/index')}?id='+dpull[i]['yui']+'">'+ dpull[i]['yunickname'] +'</a>:' +dpull[i]['turn_content']+'</div>';
                                }
                                // 得到现在动态的所有者 ID
                                // var zui = dpull[i]['zui'];
                                //准备要插入的字符串
                                var str = '<article class="media" data="'+dpull[i]['news_id']+'">\n\
                                                      <a class="pull-left thumb p-thumb">\n\
                                                          <img src="__PUBLIC__'+dpull[i]['photo']+'" style="width:50px;height:50px;border-radius:50%">\n\
                                                      </a>\n\
                                                      <div class="media-body">\n\
                                                          <a class=" p-head" href="{:U('Visitors/index')}?id='+dpull[i]['zui']+'" >'+dpull[i]['zunickname']+'</a>\n\
                                                          <span class="pull-right">'+ untotime(dpull[i]['time']*1000) +'</span>\n\
                                                          <div class="news_content">'+dpull[i]['content'] + turn_content_str +'</div>\n\
                                                          <ul class="reply" data="'+  dpull[i]['news_id'] +'"></ul>\n\
                                                          <input type="hidden" name="动态id字段名" value="动态id字段值" >\n\
                                                          <form class="form-inline">\n\
                                                                <div class="form-group">\n\
                                                                    <label class="sr-only" for="exampleInputEmail2">评论区~ 限制长度:18~</label>\n\
                                                                    <input type="text" class="form-control" id="exampleInputEmail2" name="bbcontent" maxlength="42" placeholder="评论区~ 限制长度:18~">\n\
                                                                </div>\n\
                                                                <button type="button" class="btn btn-default bbreply" data="'+  dpull[i]['news_id'] +'">点击评论</button>\n\
                                                                <button type="button" class="btn btn-default zan" data="'+ dpull[i]['news_id']+'"><span class="icon-thumbs-up"></span> <span class="zannum">'+ dpull[i]['news_zan']+'</span> 点赞</button>';
                                if (dpull[i]['user_id'] == {$uid}) {
                                  str += ' <button type="button" class="btn btn-default del"   data="'+dpull[i]['news_id']+'"><span class="icon-thumbs-up"></span> 删除</button>';
                                }else {
                                  str += ' <button type="button" class="btn btn-default turn cd-popup-trigger"   data="'+dpull[i]['news_id']+'"><span class="icon-thumbs-up"></span> 转发</button>';
                                }
                                str += '</form></div><hr></article>';
                                  //将自己和好友的动态插入到动态区
                                  $('.newsare').append(str);
                                  turn_content_str = '';
                              }}else{
                                ajaxturn =false;
                              }
                            }); //ajax END
                    }//pajax END

                    //点赞功能
                    $('.zan').live('click',function(){
                        //得到当前的动态的ID
                        var id = $(this).attr('data');
                        //得到当前的元素对象
                        var th = $(this);
                        //发送ajax
                        $.post("{:U('News/ajaxlike')}",{id:id},function(data){
                          if (data == 'true') {
                              //实时更新赞
                              th.find('.zannum').html( parseInt(th.find('.zannum').html()) + 1);
                          }
                        })
                    }); //点赞功能结束

                    //删除当前的动态
                    $('.del').live('click',function(){
                      //得到当前的动态的ID
                      var id = $(this).attr('data');
                      //得到当前的元素对象
                      var th = $(this);
                      //发送ajax
                      $.post("{:U('News/ajaxdel')}",{id:id},function(data){
                        if (data == 'true') {
                            //实时删除
                            console.log('1111');
                            th.parents('.media').remove();
                        }
                      })
                    });//删除当前的动态 结束

                    //评论功能
                    $('input[name=bbcontent]').live('focus',function(){
                      $(this).attr('placeholder','评论区~ 限定长度:18~');
                    });
                    $('.bbreply').live('click',function(){
                      //得到回复内容
                      var content = $(this).siblings('.form-group').find('input[name=bbcontent]').val();
                      if (content == '') {
                        $(this).parents('.form-inline').find('div > input[name=bbcontent]').attr('placeholder','请输入内容~');
                        return;
                      }
                      //得到当前的动态的ID
                      var id = $(this).attr('data');
                      //得到当前的元素对象
                      var th = $(this);
                      //发送ajax
                      $.post("{:U('News/ajaxreply')}",{'id':id,'content':content},function(data){
                          //得到当前的时间戳
                          var timestamp = Date.parse(new Date());
                          var str = '<li><a href ="{:U('Visitors/index')}?id={$userid}">{$nickname}</a> : '+content+' <button class="pull-right btn  btn-default delbb btn-xs" data="'+data+'">删除</button> <span class="pull-right">'+ untotime(timestamp) +'</span></li>';
                          th.parents('.media-body').find('ul.reply').css('display','block').append(str);
                          //清空评论文本框
                          th.siblings('.form-group').find('input[name=bbcontent]').val('');
                      })
                    });//评论功能 结束

                    cshbb(100);
                    //初始化评论函数
                    function cshbb(num){
                      setTimeout(function(){
                          //得到元素对象
                          $('.reply').each(function(){
                            //得到当前动态的ID
                            var id = $(this).attr('data');
                            //得到当前的元素对象
                            var th = $(this);
                            //发送ajax
                            $.post("{:U('News/ajaxgetbb')}",{id:id},function(data){
                              if (data != null) {
                                th.fadeIn("2000");
                                th.html('');
                                for (var i = 0; i < data.length; i++) {
                                  //准备字符串
                                  if (data[i]['user_id'] == {$uid}) {
                                  var strbb = '<li><a href="{:U('Visitors/index')}?id='+data[i]['user_id']+'">'+data[i]['nickname']+'</a> : '+data[i]['content']+' <button class="pull-right btn  btn-default delbb btn-xs" data="'+ data[i]['bb_id'] +'">删除</button> <span class="pull-right">'+ untotime(data[i]['time']*1000) +'</span></li>';
                                  }else{
                                  var strbb = '<li><a href="{:U('Visitors/index')}?id='+data[i]['user_id']+'">'+data[i]['nickname']+'</a> : '+data[i]['content']+'<span class="pull-right">'+ untotime(data[i]['time']*1000) +'</span></li>';
                                  }
                                  th.append(strbb);
                                }
                              }else{
                                th.css('display','none');
                              }
                            });
                          })
                        }, num)
                    }

                    var init = showbb(45000);
                    // clearInterval(init);
                    //加载回复
                    function showbb(time){
                      var init =  setInterval(function(){
                        //得到元素对象
                        $('.reply').each(function(){
                          //得到当前动态的ID
                          var id = $(this).attr('data');
                          //得到当前的元素对象
                          var th = $(this);
                          //发送ajax
                          $.post("{:U('News/ajaxgetbb')}",{id:id},function(data){
                            if (data != null) {
                              th.fadeIn("2000");
                              th.html('');
                              for (var i = 0; i < data.length; i++) {
                                //准备字符串
                                if (data[i]['user_id'] == {$uid}) {
                                var strbb = '<li><a href="{:U('Visitors/index')}?id='+data[i]['user_id']+'">'+data[i]['nickname']+'</a> : '+data[i]['content']+' <button class="pull-right btn  btn-default delbb btn-xs" data="'+ data[i]['bb_id'] +'">删除</button> <span class="pull-right">'+ untotime(data[i]['time']*1000) +'</span></li>';
                                }else{
                                var strbb = '<li><a href="{:U('Visitors/index')}?id='+data[i]['user_id']+'">'+data[i]['nickname']+'</a>: '+data[i]['content']+'<span class="pull-right">'+ untotime(data[i]['time']*1000) +'</span></li>';
                                }
                                th.append(strbb);
                              }
                            }else{
                              th.css('display','none');
                            }
                          });
                        })
                      }, time)
                      return init;
                    }

                    //删除回复
                    $('.delbb').live('click',function(){
                      //得到当前回复的ID
                      var id = $(this).attr('data');
                      //得到当前元素对象
                      var th = $(this);
                      //发送ajax
                      $.post("{:U('News/delbb')}",{id:id},function(data){
                        if (data == 'yes') {
                          //得到当前动态的回复区内容
                          var content = th.parents('.reply').find('li').length - 1;
                          if (content == 0) {
                            th.parents('.reply').css('display','none');
                          }
                          //实时删除回复
                          th.parents('li').remove();
                        }
                      });
                    });//删除回复  结束

                    //转发功能弹出框
                    $('.turn').live('click',function(){
                      //得到当前的动态的ID
                      var id = $(this).attr('data');
                      console.log('当前动态的ID:'+id);
                      $('.btn-yes').attr('data',id);
                      //将当前的内容放入提示框的隐藏区
                      var content = $(this).parents('.media-body').find('.news_content').html();
                      $('.hiddenarea').html(content);
                      // console.log(content);
                    });//转发功能弹出框 结束

                    //当关闭转发框的时候 清空文本框
                    $('#textarea').live('blur',function(){
                        // $(this).val('');
                    }); //结束

                    //提交转发到服务器
                    $('.btn-yes').click(function(){
                        //当转发是为空
                        if ($('#textarea').val() == '') {
                            return;
                        }
                        //得到被转发的动态的ID
                        var id = $(this).attr('data');
                        //得到隐藏区内容
                        var turn_content = $('.hiddenarea').html();
                        //得到转发动态内容
                        var content = $('#textarea').val();
                        //发送ajax
                        $.post("{:U('News/ajaxturn')}",{'id':id,'turn_content':turn_content,'content':content},function(data){
                            if (data == 'yes') {
                                $('.cd-popup-close').click();
                            }
                        });
                    });

                    //时间戳转格式化时间函数
                    function untotime(str){
                      var date = new Date(str);
                      Y = date.getFullYear() + '-';
                      M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                      D = date.getDate() + ' ';
                      h = date.getHours() + ':';
                      m = date.getMinutes() + ':';
                      s = (date.getSeconds()+1 < 10 ? '0'+(date.getSeconds()+1) : date.getSeconds()+1) ;
                      return Y+M+D+h+m+s;
                    }

    </script>
<script src="__PUBLIC__/Form/js/main.js"></script>
</block>
